import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";
import { Form, Input, List, Card, Grid, Dialog, Toast } from "antd-mobile";
import { BottomBtn } from "@components";
import { createAction } from "@common/utils";
import {
  SAGA_UNPACK_LOAD_DETAILS,
  SAGA_UNPACK_REMOVE,
} from "@store/unpack/saga-types";
import { CLEAR_UNPACK_DETAILS } from "@store/unpack/action-types";
import { POP_PAGE_STACK } from "@store/global-state/action-types";

const Details = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const dispatch = useDispatch();
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const data = useSelector((state) => state.unpack.details);

  const Description = ({ title, record }) => (
    <Card title={title}>
      <Grid columns={2} gap={12}>
        <Grid.Item>物料条码</Grid.Item>
        <Grid.Item>{record.itemBarcode}</Grid.Item>
        <Grid.Item>物料编码</Grid.Item>
        <Grid.Item>{record.itemCode}</Grid.Item>
        <Grid.Item>物料名称</Grid.Item>
        <Grid.Item>{record.itemName}</Grid.Item>
        <Grid.Item>数量/单位</Grid.Item>
        <Grid.Item>{`${record.qty} ${record.itemUnit}/${record.pkgUnit}`}</Grid.Item>
      </Grid>
    </Card>
  );

  useEffect(() => {
    dispatch(
      createAction(SAGA_UNPACK_LOAD_DETAILS, { id: searchParams.get("id") })
    );
    return () => dispatch(createAction(CLEAR_UNPACK_DETAILS));
  }, []);

  useEffect(() => {
    if (data) {
      form.setFields([{ name: "palletBarcode", value: data.palletBarcode }]);
    }
  }, [data]);

  const handleDel = () => {
    Dialog.show({
      content: "确定删除?",
      closeOnAction: true,
      actions: [
        [
          {
            key: "cancel",
            text: "取消",
          },
          {
            key: "delete",
            text: "确定",
            bold: true,
            danger: true,
            onClick: () => {
              dispatch(
                createAction(SAGA_UNPACK_REMOVE, {
                  id: searchParams.get("id"),
                  callback: () => {
                    dispatch(createAction(POP_PAGE_STACK, navigate));
                    Toast.show({
                      icon: "success",
                      content: "删除成功",
                      maskClickable: false,
                    });
                  },
                })
              );
            },
          },
        ],
      ],
    });
  };

  return (
    <>
      <div style={{ marginTop: "45px", marginBottom: "65px" }}>
        <Form form={form} mode="card">
          <Form.Header>基本信息</Form.Header>
          <Form.Item name="palletBarcode" label="托码">
            <Input readOnly />
          </Form.Item>
        </Form>
        <List header="物料信息">
          {data?.items.map((i, idx) => (
            <List.Item
              key={idx}
              style={{ backgroundColor: "#F5F5F5" }}
              description={
                <Description
                  title={`${idx + 1}/${data?.items.length}`}
                  record={i}
                />
              }
            />
          ))}
        </List>
      </div>
      <BottomBtn
        items={[{ btnTxt: "删除", color: "danger", handler: handleDel }]}
      />
    </>
  );
};

export default Details;
